<template>
	<div class="week">
		<div class="week-desc">
			<div class="week-desc-content">
				////////<span>周末出游</span>////////<p>智力推荐超完美套餐</p>
			</div>
		</div>
		<div class="week-swiper">
			<swiper ref="mySwiper" :options="swiperOption" >
			   <swiper-slide v-for="item of weekendList" :key="item.id">
				   <div class="weekSwiper-item" >
					   <div class="weekSwiper-item-img">
						   <img :src="item.imgUrl">
					   </div>
					   <div class="weekSwiper-item-desc">
						   {{item.desc}}<p>{{item.detail}}</p>
					   </div>
				   </div>
			   </swiper-slide>
			 </swiper>
		</div>
	</div>
</template>

<script>
export default {
  name: 'homeWeekend',
  props:{
	  weekendList:Array
  },
  data(){
	  return{
		  swiperOption:{
			  freeMode:true,
			  spaceBetween:20,
			  slidesPerView:3
		  }
	  }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
	.week
	  overflow: hidden
	  height: 0
	  padding-bottom: 58%
	  border-top: .2rem solid #EEEEEE 
	  .week-desc
	    position: relative 
	    overflow: hidden
	    height: 0
	    padding-bottom: 16%
		.week-desc-content
		  text-align: center
		  color: #AAAAAA
		  position: absolute
		  top: 50%
		  left: 50%
		  transform: translate(-50%,-50%)         //这是居中显示的一种写法
		.week-desc-content>span
		  display: inline-block 
		  color: #000000 
		  font-weight: bold 
		  margin: .15rem .12rem
	  .week-swiper
	    overflow: hidden
	    height: 0
	    padding-bottom: 84%
	    .weekSwiper-item
	      overflow: hidden
	      height: 0
	      width: 100% 
	      padding-bottom: 120%
	      margin-left: .2rem
	      border: .02rem solid #CCCCCC 
		  .weekSwiper-item-img
		    overflow: hidden
		    height: 0
		    padding-bottom: 68% 
		  .weekSwiper-item-img>img
		    max-width: 100%
		  .weekSwiper-item-desc
		    text-align: center
		    padding-top: .3rem
		  .weekSwiper-item-desc>p
		    padding-top: .1rem
	
	    
	  

</style>
